<template>
	<!-- 参数列表 -->
	<view class="w-100" @click="cutShow = false">
		<view class="head_box flex justify-between align-center p-1">
			<text class="font-small px-5 py-1 bg_main text-white" @click="goPages('/subPages/home/product_data/contrast?ids=' + priductId + '&mid=' + priductMid)">+对比</text>
			<text class="h6 font-weight-bolder">{{ productModel }}</text>
			<text class="font-small px-5 py-1 bg_main text-white" @click.stop="cutShow = !cutShow">
				切换(
				<text v-if="modelProduct">{{ modelProduct.length || 0 }}</text>
				)
			</text>
			<view class="popup h6 text-white font-weight-bolder px-3 py-1" v-show="cutShow">
				<view v-if="modelProduct && modelProduct.length < 1" class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
				<scroll-view scroll-y="true" class="scroll-Y" show-scrollbar="true" v-else>
					<view class="h6 lh_42 text-white py-1" v-for="item of modelProduct" :key="item.id" @click="modelChange(item)" :class="{ 'text-hover-light': !item.mid }">
						{{ item.product_name }}
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 产品规格 -->
		<view class="table_warp mt-1 w-100">
			<view>
				<t-table border-color="#f2f2f2" v-for="(item, index) of list" :key="index">
					<t-tr color="#333333" align="left" class="tr">
						<t-th>
							<text class="th_label">{{ item.title }}</text>
						</t-th>
					</t-tr>
					<t-tr class="tr" v-for="(child, childIdx) of item.list" :key="childIdx">
						<t-td align="center" class="td l_label">{{ child.name }}</t-td>
						<t-td align="center" class="td td_cont text-center">
							<u-read-more ref="uReadMore" :showHeight="140 + 'rpx'" textIndent="0" :shadowStyle="shadowStyle" :toggle="true" color="#999" fontSize="23rpx">
								<rich-text class="td_cont_item font-small text-center" :nodes="child.val | formatRichText" selectable></rich-text>
							</u-read-more>
						</t-td>
					</t-tr>
				</t-table>
			</view>
		</view>
	</view>
</template>

<script>
import { specifications } from '@/api/home/nav/product_data.js';
import tTable from './t-table/t-table.vue';
import tTh from './t-table/t-th.vue';
import tTr from './t-table/t-tr.vue';
import tTd from './t-table/t-td.vue';
import util from '@/common/js/util.js';
export default {
	components: {
		tTable,
		tTh,
		tTr,
		tTd
	},
	props: ['priductId', 'priductMid', 'productModel', 'modelProduct', 'productList'],
	data() {
		return {
			cutShow: false,
			list: [],
			shadowStyle: {
				// #ifndef APP-NVUE
				backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 90%)',
				// #endif
				// #ifdef APP-NVUE
				// nvue上不支持设置复杂的backgroundImage属性
				backgroundImage: 'linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))',
				// #endif
				paddingTop: '50px',
				marginTop: '-50px'
			}
		};
	},
	watch: {
		productList(newV, oldV) {
			this.list = newV;
		}
	},
	filters: {
		formatRichText(html) {
			return util.formatRichText(html);
		}
	},
	mounted() {
		this.list = this.productList;
		if (this.list && this.list.length >= 1) {
			this.$nextTick(() => {
				console.log('this.$refs', this.$refs);
				this.$refs.uReadMore.forEach(item => item.init());
			});
		}
	},
	methods: {
		// 切换型号
		modelChange(val) {
			// console.log(val);
			this.$emit('detailChange', val.id);
			// if (!val.mid) {
			// 	return;
			// } else {
			// 	let msg = {
			// 		id: val.id,
			// 		mid: val.mid
			// 	};
			// 	specifications(msg)
			// 		.then(res => {
			// 			if (res.code == 0) {
			// 				this.list = res.data;
			// 				val.mid = '';
			// 			} else {
			// 				uni.$u.toast(res.msg);
			// 			}
			// 		})
			// 		.catch(err => {
			// 			console.log('切换型号失败', err);
			// 		});
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
.head_box {
	background-color: #f2f2f2;
	position: relative;
}
.tr {
	background-color: #f2f2f2;
	border-bottom: 1px solid #dcdcdc;
	width: 100%;
}
.th_label {
	font-size: 28rpx;
	margin-left: 30rpx;
}
.td {
	font-size: 20rpx;
	flex: 0 1 auto;
}
.l_label {
	width: 206rpx;
	background-color: #f2f2f2;
	font-size: 20rpx;
}
.td_cont {
	background-color: #ffffff;
	position: relative;
	width: calc(100% - 206rpx);
}
.td_cont_item {
	width: 490rpx;
	white-space: normal;
	word-break: break-all;
}
::v-deep .td_cont_item img {
	width: 490rpx;
	display: block;
}
.popup {
	position: absolute;
	top: 60.5rpx;
	right: 0;
	max-width: 400rpx;
	background: $color14;
	z-index: 999;
}
.scroll-Y {
	height: 400rpx;
}
</style>
